<template>
  <div class="compose-item" v-if="work && work.content">
    <div class="user-info flex f-ai-c">
      <div class="avatar-wrapper">
        <img :src="work.author.avatar" alt="" />
      </div>
      <div class="name-wrapper flex f-d-c f-jc-c">
        <span class="name">{{ work.author.name }}</span>
        <span class="time">{{ work.time }}</span>
      </div>
    </div>
    <div class="content">{{ work.content }}</div>
    <div class="operator-board flex f-ai-c f-jc-fe">
      <i
        class="iconfont icon-dianzan"
        @click="handleClickParise"
        :style="{ color: parised ? 'orangered' : '' }"
      ></i>
      <i class="iconfont icon-pinglun"></i>
    </div>
    <div class="praise-people flex f-ai-c f-w-w">
      <span>{{ work.parisers }}</span>
    </div>
    <div class="mark-input flex f-ai-c">
      <input
        v-model="markContent"
        @keyup.enter="handleMark"
        ref="input"
        type="text"
        @click="handleClickMark"
        placeholder="评论"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "ComposeItem",
  props: {
    work: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      markContent: "",
      parised: false
    };
  },
  methods: {
    handleMark() {
      this.$emit("mark", this.markContent);
    },
    handleClickParise() {
      this.parised = !this.parised;
      this.$emit("parise", this.work);
    },
    handleClickMark() {
      this.$refs.input.focus();
    }
  }
};
</script>

<style scoped lang="less">
.compose-item {
  width: 100%;
  > * {
    width: 100%;
  }

  .user-info {
    height: 8vh;
    .avatar-wrapper {
      width: 6vh;
      height: 6vh;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .name-wrapper {
      margin-left: 2vw;
      flex-grow: 1;
      height: 100%;
      .name {
        font-size: 4vw;
        color: #333;
      }
      .time {
        font-size: 1vw;
        color: gray;
      }
    }
  }

  .content {
    padding: 1vh 0;
    font-size: 4.2vw;
  }
  .operator-board {
    height: 5vh;
    .iconfont {
      margin-right: 7vw;
      font-size: 6vw;
      color: gray;
    }
  }
  .praise-people {
    height: 5vh;
    span {
      color: rgb(12, 5, 39);
      font-size: 4vw;
    }
  }
  .mark-input {
    height: 5vh;
    input {
      border: none;
      padding: 1vh 1vw;
      width: 100%;
      background-color: whitesmoke;
    }
  }
}
</style>
